<template>
  <div class="hv-form-property-container">
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="baseProperty" header="基本属性">
        <hv-base-props-group :compData="propData" />
      </a-collapse-panel>

      <a-collapse-panel key="styleProperty" header="样式属性">
        <div class="hv-form-data-container">
          <hv-border-style-group :compData="propData" />
          <hv-transform-group :compData="propData" />
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="compOptionProperty" header="组件属性">
        <div class="hv-form-data-container" v-if="propData && propData.componentProps">
          <a-row>
            <a-col :span="24" class="hv-visual-property-label">图片来源：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="24">
              <a-select
                v-model:value="propData.componentProps.imgSrcType"
                size="small"
                placeholder="请选择图片来源..."
                dropdownClassName="hv-dark-select-dropdown"
              >
                <a-select-option
                  :value="option.value"
                  v-for="(option, index) in pictureBoxSourceListConst"
                  :key="option.value + index"
                >
                  {{ option.label }}
                </a-select-option>
              </a-select>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24" class="hv-visual-property-label">图片：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="24">
              <hv-upload-img
                v-model:imgUrl="propData.componentProps.imgUrl"
                v-if="
                  propData.componentProps.imgSrcType === pictureBoxSourceConst.default
                "
              />

              <a-textarea
                v-model:value="propData.componentProps.imgUrl"
                placeholder="请输入图片地址"
                style="height: auto"
                :rows="3"
                v-if="
                  propData.componentProps.imgSrcType === pictureBoxSourceConst.url
                "
              />
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24" class="hv-visual-property-label">替换来源：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="24">
              <a-select
                v-model:value="propData.componentProps.replaceImgSrcType"
                size="small"
                placeholder="请选择替换图片来源..."
                dropdownClassName="hv-dark-select-dropdown"
              >
                <a-select-option
                  :value="option.value"
                  v-for="(option, index) in pictureBoxSourceListConst"
                  :key="option.value + index"
                >
                  {{ option.label }}
                </a-select-option>
              </a-select>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24" class="hv-visual-property-label">替换图片：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="24">
              <hv-upload-img
                v-model:imgUrl="propData.componentProps.replaceImgUrl"
                v-if="
                  propData.componentProps.replaceImgSrcType ===
                  pictureBoxSourceConst.default
                "
              />

              <a-textarea
                v-model:value="propData.componentProps.replaceImgUrl"
                placeholder="请输入图片地址"
                style="height: auto"
                :rows="3"
                v-if="
                  propData.componentProps.replaceImgSrcType ===
                  pictureBoxSourceConst.url
                "
              />
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24" class="hv-visual-property-label">替换文本：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="24">
              <a-input v-model:value="propData.componentProps.imgAlt" />
            </a-col>
          </a-row>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType } from "vue";
import BasePropsGroup from "../common/BasePropsGroup.vue";
import UploadImg from "../common/UploadImg.vue";
import BorderStyleGroup from "../common/BorderStyleGroup.vue";
import TransformGroup from "../common/TransformGroup.vue";
import type PictureBoxPropOptionType from "@/visual/commons/types/picture-box-prop-option-type";
import type DashboardComponentType from "@/visual/commons/types/dashboard-component-type";
import useVisualProperty from "@/visual/hooks/use-visual-property";
import { pictureBoxSourceConst, pictureBoxSourceListConst } from "@/visual/commons/consts/dashboard-const";


export default defineComponent({
  name: "PictureBoxProperty",
  components: {
    hvBasePropsGroup: BasePropsGroup,
    hvUploadImg: UploadImg,
    hvTransformGroup: TransformGroup,
    hvBorderStyleGroup: BorderStyleGroup,
  },
  props: {
    compData: {
      type: Object as PropType<DashboardComponentType<PictureBoxPropOptionType>>,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const { activeKey, propData } = useVisualProperty<PictureBoxPropOptionType>(props);

    return {
      activeKey,
      propData,
      pictureBoxSourceListConst,
      pictureBoxSourceConst,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./PictureBoxProperty.less";
</style>
